<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                template="./../template/StakeholderTemplate.xhtml">

    <ui:define name="contentInsert">

        <h3>Outlets</h3>
        <h:form>

            <p:ajaxStatus style="width:16px;height:16px;">
                <f:facet name="start">
                    <h:graphicImage value="http://www.primefaces.org:8080/showcase/design/ajaxloading.gif" />
                </f:facet>
                <f:facet name="complete"> 
                    <h:outputText value="" />
                </f:facet>
            </p:ajaxStatus>
            <p:messages id="msg"/>

            <p:dataTable id="dataTable" value="#{outletManagerBean.getOutletsByStakeholder()}" var="o" 
                         paginator="true" rows="10">

                <p:column style="width: 10px" headerText="ID">
                    <f:facet name="header">Outlet Id</f:facet>
                    #{o.id}
                </p:column>

                <p:column style="width: 25px" headerText="Outlet Name" filterBy="#{o.outletName}" filterMatchMode="contains">
                    #{o.outletName}
                </p:column>

                <p:column headerText="Options" style="width:250px">
                    <p:commandButton value="Edit" actionListener ="#{createOutletMB.updateSelectedOutlet(o)}"
                                     action="#{editOutletMB.updateOption(1)}" ajax="false" update="editPanel">
                    </p:commandButton>
                    <p:commandButton   value="Delete" onclick="if (!confirm('Are you sure you want to delete outlet?')) return false"
                                       actionListener="#{outletManagerBean.deleteOutlet(o)}" ajax="false">
                    </p:commandButton>
                    <p:commandButton value="Add Manager" update="editPanel"  ajax="false"
                                     actionListener="#{outletManagerBean.updateSelectedOutlet(o)}" action="#{editOutletMB.updateOption(3)}">
                    </p:commandButton>
                    <p:commandButton value="Remove Manager" actionListener="#{outletManagerBean.updateSelectedOutlet(o)}" 
                                     action="#{editOutletMB.updateOption(4)}" update="editPanel"  >
                    </p:commandButton>

                </p:column>

            </p:dataTable>
            <br/>
        </h:form> 
        <p:panel id="editPanel" style="border-width: 0px">
            <h:outputText value="${op}"/>
            <c:choose>
                <c:when test="#{editOutletMB.option eq 1}">
                    <h:form>
                        <h:panelGrid columns="3">

                            <!--WALAU CM Team why your outlet need so many bleddy data fields.....-->

                            <h:outputLabel for="outletName" value="Outlet Name:"/>
                            <p:inputText required="true" requiredMessage="This field cannot be blank!"
                                         id="outletName" value="#{createOutletMB.outletName}"/>
                            <p:message for="outletName"/>

                            <h:outputLabel for="buildingName" value="Building Name:"/>
                            <p:inputText required="true" requiredMessage="This field cannot be blank!"
                                         id="buildingName" value="#{createOutletMB.buildingName}"/>
                            <p:message for="buildingName"/>

                            <h:outputLabel for="blkNo" value="Block Number:"/>
                            <p:inputText required="true" requiredMessage="This field cannot be blank!"
                                         id="blkNo" value="#{createOutletMB.blkNo}"/>
                            <p:message for="blkNo"/>

                            <h:outputLabel for="streetName" value="Street Name:"/>
                            <p:inputText required="true" requiredMessage="This field cannot be blank!"
                                         id="streetName" value="#{createOutletMB.streetName}"/>
                            <p:message for="streetName"/>

                            <h:outputLabel for="unitName" value="Unit Name:"/>
                            <p:inputText required="true" requiredMessage="This field cannot be blank!"
                                         id="unitName" value="#{createOutletMB.unitName}"/>
                            <p:message for="unitName"/>

                            <h:outputLabel for="postalCode" value="Postal Code:"/>
                            <p:inputText required="true" requiredMessage="This field cannot be blank!"
                                         id="postalCode" value="#{createOutletMB.postalCode}"/>
                            <p:message for="postalCode"/>

                            <h:outputLabel for="phoneNo" value="Contact Number:"/>
                            <p:inputText required="true" requiredMessage="This field cannot be blank!"
                                         id="phoneNo" value="#{createOutletMB.phoneNo}"/>
                            <p:message for="phoneNo"/>

                            <h:outputLabel for="websiteURL" value="Website URL:"/>
                            <p:inputText required="true" requiredMessage="This field cannot be blank!"
                                         id="websiteURL" value="#{createOutletMB.websiteURL}"/>
                            <p:message for="websiteURL"/>

                            <h:outputLabel for="email" value="Email Address:"/>
                            <p:inputText required="true" requiredMessage="This field cannot be blank!"
                                         id="email" value="#{createOutletMB.email}"/>
                            <p:message for="email"/>

                            <h:outputLabel for="priceRange" value="Price Range:"/>
                            <p:inputText required="true" requiredMessage="This field cannot be blank!"
                                         id="priceRange" value="#{createOutletMB.priceRange}"/>
                            <p:message for="priceRange"/>

                            <h:outputLabel for="image" value="Outlet Picture URL:"/>
                            <p:inputText required="true" requiredMessage="This field cannot be blank!"
                                         id="image" value="#{createOutletMB.image}"/>
                            <p:message for="image"/>           

                            <h:outputLabel for="operatingHrs" value="Opening Hours:"/>
                            <p:inputText required="true" requiredMessage="This field cannot be blank!"
                                         id="operatingHrs" value="#{createOutletMB.operatingHrs}"/>
                            <p:message for="operatingHrs"/>
                        </h:panelGrid>

                        Drag the marker on the map to the spot indicating where your outlet is located:

                        <script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;region=SG" type="text/javascript">             
                        </script>

                        <p:gmap id ="map" center="1.360803,103.817368" zoom="13" type="HYBRID"   
                                style="width:600px;height:400px"  
                                model="#{mapBean.draggableModel}"  
                                markerDragListener="#{createOutletMB.getLatLong}"
                                onMarkerDragUpdate="coordinates" />  <br/>


                        <p:panel id="coordinates">        
                            <h:panelGrid columns="2">
                                <h5>Latitude: </h5> <h:outputLabel value="#{createOutletMB.latitude}"/>
                                <h5>Longitude: </h5> <h:outputLabel value="#{createOutletMB.longitude}"/>
                            </h:panelGrid>
                        </p:panel>
                        <p:commandButton id="editOutlet" value="Update Outlet Information"
                                         actionListener="#{createOutletMB.editOutlet}" ajax="false">
                        </p:commandButton>
                    </h:form>
                </c:when>
                <c:when test="#{editOutletMB.option eq 3}">
                    <h:form>
                        <h5>Add New Outlet Manager</h5>
                        Enter the manager's FoodSage Account (email address).<br/>
                        <p:inputText id="manager_email"  value="#{outletManagerBean.outletManager_email}" required="true" requiredMessage="A valid email address is needed">
                            <f:validateRegex pattern="[a-zA-Z0-9]+@[a-zA-Z0-9]+\.[a-zA-Z0-9]+"/>
                        </p:inputText>
                        <p:message for="manager_email"/>
                        <p:commandButton value="Add Manager" action="#{outletManagerBean.createOutletManager()}" ajax="false"/>
                    </h:form> 
                </c:when>
                <c:when test="#{editOutletMB.option eq 4}">
                    <h:form>
                        <h5>Remove Outlet Manager</h5>
                        Choose the manager to be removed.<br/>
                        <h:selectOneMenu value="#{outletManagerBean.outletManager_email}" style="width:220px;">
                            <f:selectItems value="#{outletManagerBean.outletManagerEmailsbyOutlet}"/>
                        </h:selectOneMenu>
                        <p:commandButton value="Remove this Manager" action="#{outletManagerBean.deleteOutletManager()}" ajax="false"/>
                    </h:form>
                </c:when>
            </c:choose>
        </p:panel>
    </ui:define>
</ui:composition>